<template>
  <div class="channel-message">
    <div class="channel-message__area">
      <div class="channel-message__cnt" ref="msgBox" @wheel="onMsgBoxScroll">
        <div class="channel-message__dialog" v-for="(item, index) in messages" :key="index" :data-index="index">
          <div class="channel-message__dialog__top">
            <span class='channel-message__dialog__nick'>{{item.nickname}}</span>
          </div>
          <div class="channel-message__dialog__cnt">{{item.msg}}</div>
        </div>
      </div>
    </div>

    <div class="channel-message__send">
      <input type="text" placeholder="请输入发送消息" v-model="msgContent"/>
      <a href="javascript:void(0);" @click.stop.prevent="onSendMsg($event)">发送</a>
    </div>
  </div>
</template>

<script>
import { ChannelEvent, Channels } from '@/common/'

const cache = {
  scrollKey: null,
  updateKey: null
}

export default {
  name: 'channel-message',
  components: {
  },
  watch: {
    'messages': function () {
      const vm = this
      clearTimeout(cache.updatekey)
      vm.scrollToBottom()
      cache.updatekey = setTimeout(() => {
        vm.scrollToBottom()
      }, 100)
    }
  },
  data () {
    return {
      messages: [],
      allowScroll: true,
      msgContent: ''
    }
  },
  mounted () {
    this.start()
  },
  destroyed () {
    this.stop()
  },
  computed: {
  },
  methods: {
    start () {
      Channels.impl().addListener(ChannelEvent.CHAT_PUBLIC, this.onChatPublic)
    },
    stop () {
      Channels.impl().removeListener(ChannelEvent.CHAT_PUBLIC, this.onChatPublic)
    },
    onMsgBoxScroll () {
      const vm = this
      clearTimeout(cache.scrollKey)
      vm.allowScroll = false
      cache.scrollKey = setTimeout(() => {
        vm.allowScroll = true
        vm.scrollToBottom()
      }, 3000)
    },
    scrollToBottom () {
      const vm = this
      const { msgBox } = vm.$refs
      if (vm.allowScroll) {
        msgBox.scrollTop = msgBox.scrollHeight
      }
    },
    onChatPublic (e) {
      var msg = e.eventData
      var exp = (msg.msg && msg.msg.match(/(\S*)<txt data="(\S*)"(\S*)/)) || []
      var from = msg.from
      var nickname = msg.nickname
      var fontsize = msg.size
      var to = msg.to
      msg = exp.length > 3 ? exp[2] : ''
      this.messages.push({
        from,
        nickname,
        fontsize,
        to,
        msg
      })
    },
    onSendMsg (e) {
      var myInfo = Channels.impl().getMyUserInfo()
      var from = (myInfo && myInfo.uid) || 0
      var to = Channels.impl().ssid()
      var fontsize = 12
      var msg = this.msgContent
      var nickname = (myInfo && myInfo.nick) || ''
      this.messages.push({
        from,
        nickname,
        fontsize,
        to,
        msg
      })
      Channels.impl().sendMsgPublic(msg, '宋体', 12, 0)
    }
  }
}
</script>

<style lang="scss">
.channel-message {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  &__area {
    width: 100%;
    height: 100%;
    position: relative;
  }
  &__cnt {
    position: absolute;
    top: 0px;
    bottom: 0;
    left: 0;
    right: 3px;
    overflow-y: auto;
  }
  &__dialog {
    margin-bottom: 16px;
    &__nick {
      vertical-align: middle;
      display: inline;
      font-size: 14px;
      line-height: 24px;
      color: #808080;
    }
    &__cnt {
      margin-left: 10px;
      font-size: 16px;
      line-height: 1.5;
      color: black;
    }
  }
  &__send {
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
    border-top: 1px solid #e3e3e3;
    padding: 10px;
    align-items: center;
    input {
      width: 100%;
      height: 25px;
    }
    a {
      margin-left: 10px;
      width: 60px;
      height: 30px;
      border-radius: 5px;
      line-height: 30px;
      text-align: center;
      font-size: 11pt;
      background-color:#42b983;
      color: #ebebeb;
    }
  }
}
</style>
